$def with (text,query,tap_endpoint)

<!doctype html>

<html>

    <head>
        <title>TAP Interface Table viewer</title>
        <link rel="stylesheet" type="text/css" href="/static/style.css" />
        <link rel="stylesheet" type="text/css" href="/static/css/jquery.lightbox-0.5.css" media="screen" />
        <script type="text/javascript" src="/static/js/jquery.js"></script>
        <script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script>     
        <script type="text/javascript" src="/static/js/jquery.lightbox-0.5.js"></script>
        <script type="text/javascript" src="/static/js/highcharts.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script>
        <script src="/static/js/adapters/mootools-adapter.js" type="text/javascript"></script>
        <script type="text/javascript" src="/static/js/themes/grid.js"></script>
        <script type="text/javascript">
	    

        /**
		 * Visualize an HTML table using Highcharts. The top (horizontal) header 
		 * is used for series names, and the left (vertical) header is used 
		 * for category names. This function is based on jQuery.
		 * @param {Object} table The reference to the HTML table to visualize
		 * @param {Object} options Highcharts options
		 */
		Highcharts.visualize = function(table, options) {
			 options.series = [];   
			 options.series[0] = { 
						name: 'Sample',
						data: []
					};
			 
			 jQuery("#viewer_table tr").each(function(i, v){				
					if (i>0) {
					 	var values = Array();
						var count =0
						jQuery(this).children('td').each(function(ii, vv){			
							    values[count] = parseFloat(this.innerHTML);
								count=count+1;						
						});		
						options.series[0].data.push(values);	
					}
			 });
			 var chart = new Highcharts.Chart(options);			
		}
		
		// On document ready, call visualize on the datatable.
		jQuery(document).ready(function() {	

		 	jQuery('#results').fadeIn(1500);
            jQuery('#votable').tablesorter();   
            jQuery('#axis_input_form').each(function() {
        	jQuery(this).submit(function() {
            	var x_axis = jQuery("input#x_axis").val();
        		var y_axis = jQuery("input#y_axis").val();
        		var query = jQuery("input#query").val();
        		var tap_endpoint = jQuery("input#tap_endpoint").val();
        		jQuery('#viewer_table_div').fadeOut('fast');

        		if (x_axis =='' || y_axis ==''){
        			alert('Please enter a query');
        		} else {	
	        		jQuery.ajax({
                        type: "POST",
                        data: {xaxis : x_axis,yaxis : y_axis,query : query,tap_endpoint : tap_endpoint},
                        timeout: 1000000,
                        error: function() {
                     		alert('There was an error processing your request');
                        },
                        success: function(data) {
                        	var table = document.getElementById('viewer_table');
                			options = {
                					chart: {
                						renderTo: 'container', 
                						defaultSeriesType: 'scatter',
                						zoomType: 'xy'
                					},
                					title: {
                						text: x_axis + '  x  ' + y_axis
                					},
                					subtitle: {
                						text: 'Table-Viewer dynamic graph'
                					},
                					xAxis: {
                						title: {
                							enabled: true,
                							text: x_axis
                						},
                						startOnTick: true,
                						endOnTick: true,
                						showLastLabel: true
                					},
                					yAxis: {
                						title: {
                							text: y_axis
                						}
                					},
                					tooltip: {
                						formatter: function() {
                				                return ''+
                								this.x +' , '+ this.y;
                						}
                					},
                					legend: {
                						layout: 'vertical',
                						align: 'left',
                						verticalAlign: 'top',
                						x: 100,
                						y: 70,
                						floating: true,
                						backgroundColor:'#FFFFFF',
                						borderWidth: 1
                					},
                					plotOptions: {
                						scatter: {
                							marker: {
                								radius: 5,
                								states: {
                									hover: {
                										enabled: true,
                										lineColor: 'rgb(100,100,100)'
                									}
                								}
                							},
                							states: {
                								hover: {
                									marker: {
                										enabled: false
                									}
                								}
                							}
                						}
                					}
                					
                				}
                            jQuery('#viewer_table_div').html(data).hide().fadeIn(1500);
                	        jQuery('#viewer_table').tablesorter();            
                	        Highcharts.visualize(table, options);		
                			jQuery('#container').slideDown('slow');

                        }
                    });
        		} 
        		
               	return false;
        	
       		 });
			
          });
		
		});

		</script>
			    
        <link rel="icon" 
      	            type="image/png" 
                              href="static/icon2.png">
                              

	<!--[if lte IE 6]>
			<style type="text/css" media="screen">
				#header div{
					background-image: none;
					filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale');
				}
			</style>
	<![endif]-->
    </head>
    
    <body>
	
	<div id="viewer_header">
		<h3>Table Viewer</h3>	
	</div>	
	<div id="gradient"></div>

	<div id="axis_input">
		<div id="post-it-example">
			<div style="width:280px;height:200px;padding-left:50px;padding-top:40px;">
			 <p>Enter an expression for the X & Y axis.</p><small>(Can be any mathematical expression,
			 formed using the column names)</small><br>
			  <br><div style="margin-left:55px;"><b>Example:</b><br>
			   X-Axis: yCorMag-xCorMag<br>
			   Y-Axis: ra
			     </div>
		    </div>
		</div><br>
		
		<span>Please enter a X and Y axis for the plot:</span>
		<div style="width:350px;height:110px;display:block"><br><br><br>
			<form method="post" id="axis_input_form">
			    <input name="query" id="query" type="hidden" $:query />
   			    <input name="tap_endpoint" id="tap_endpoint" type="hidden" $:tap_endpoint />		    
				<label for="x-axis">X-Axis:</label> <input name="x_axis" type="text" id="x_axis"/><br>
				<label for="y-axis">Y-Axis:</label><input name="y_axis" type="text" id="y_axis"/>
				<input type="submit" value="Submit" class="submit" />
			</form>
		</div>
	</div>
    
    <div id="container" style="width: 900px; height: 400px; margin: 0 auto;display:none"></div>
    <br>
    <div id="viewer_table_div">
   </div>
    
<br>       
	<div id="results">
		<span style="font-size:13px;font-style:italic;padding-bottom:52px;">The following table contains the results of your initial query</span>
		<br>
		$:text
	</div>

	
    <br><br>
       
    </body>

</html>
